﻿<html>
<head>
	<title>Flickr Link Options</title>
	<link href='ti.flickr.options.css' rel='stylesheet' type='text/css'/>
	<script src='library/md5.js' type='text/javascript'></script>
	<script src='library/ti.js' type='text/javascript'></script>
	<script src='library/ti.flickr.js' type='text/javascript'></script>
	<script src='ti.flickr.options.js' type='text/javascript'></script>
	<script type='text/javascript'>
		var _notConnectedDiv;
		var _connectedAsDiv;
		var _finishedButton;
		var _cancelButton;
		var _logoutButton;
		var _loginButton;
		var _saveButton;
		var _addButton;
	
		dom.ready(function(e) {
			var i = 2;
			options.load();
			var t = options.template.get();
			
			_notConnectedDiv = dom.get('not-connected');
			_connectedAsDiv = dom.get('connected-as');
			_finishedButton = dom.get('finished-button');
			_cancelButton = dom.get('cancel-button');
			_logoutButton = dom.get('logout-button');
			_loginButton = dom.get('login-button');
			_saveButton = dom.get('save-button');
			_addButton = dom.get('add-button');
			
			dom.get('template-text').innerHTML = t.template;
			
			_saveButton.onClick(function(e) { options.save(); });
			_addButton.onClick(function(e) {
				var n = ti.clone('section');
				changeId(n, i);
				ti.append('template-fields', n);
				i++;
			});
			if (flickr.credentials.token) {	showUser(); } else { showLogin(); }
		});
		
		function showUser() {
			_notConnectedDiv.hide();
			_connectedAsDiv.show();
			
			dom.get('user-name').innerHTML = 'You are connected as ' + flickr.credentials.name
				+ ' with ' + flickr.credentials.permission + ' permissions';
			_logoutButton.onClick(function(e) {
				flickr.credentials.clear();
				showLogin();
			});
		}
		
		function showLogin() {
			_notConnectedDiv.hide();
			_connectedAsDiv.show();
			_loginButton.onClick(function(e) {
				flickr.getLoginUrl(function(url) {
					_loginButton.hide();
					_finishedButton.style.display = 'inline';
					_cancelButton.style.display = 'inline';
					chrome.tabs.create({ "url": url });
				});
			});
			_finishedButton.onClick(function(e) {
				flickr.getToken(function(r) {
					if (flickr.credentials.token) { showUser();	}
				});
			});
			_cancelButton.onClick(function(e) {
				_finishedButton.hide();
				_cancelButton.hide();
				_loginButton.show();
			});
		}
		
		function changeId(node, suffix) {
			if (node.nodeType == 1) {
				if (node.id) { node.id += suffix; }
				var f = node.getAttribute('for');
				if (f) { node.setAttribute('for', f + suffix); }
				for (var i in node.children) { changeId(node.children[i], suffix); }
			}
		}
	</script>
</head>
<body>
	<form>
		<fieldset id='template-fields'>
			<legend>Insertion Templates</legend>
			<div class='template-section' id='section'>
				<label for='template-url'>Site</label>
				<input type='text' id='template-url' value='*'/><br/>
				<label for='template-text'>Template</label>
				<textarea id='template-text'></textarea>
			</div>
		</fieldset>
		<input type='button' value='Save' id='save-button'/>
		<input type='button' value='Add Another' id='add-button'/>
		
		<fieldset id='login'>
			<legend>Flickr Connection</legend>
			<div id='not-connected'>
				You are not logged into Flickr. Only public images will be retrieved.
				<input type='button' id='login-button' value='Login'/>
				<input type='button' id='finished-button' value='Finished'/>
				<input type='button' id='cancel-button' value='Cancel'/>
			</div>
			<div id='connected-as'>
				<div id='user-name'></div>
				<input type='button' id='logout-button' value='Logout'/>
			</div>
		
		</fieldset>
	</form>
</body>